//收益图表
function earnings() {
    option = {
        grid: {
            left: '3%',
            right: '3%',
            bottom: '20px',
            top: "30px",
            containLabel: true //包含标签
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['2016', '2017', '2018', '2019', '2020', '2021', '2022'],
            axisLine: {
                lineStyle: {
                    color: '#01AAE2',
                    width: 2, //这里是为了突出显示加上的
                }
            },
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#fff',
                    fontSize: 10 //设置x轴字体
                },
                // 隐藏x轴的标签
                formatter: function () {
                    return "";
                }
                // interval: 0,
                // rotate: -30
            },
            axisTick: {
                show: false //去掉刻度线
            }
        },
        yAxis: {
            type: 'value',
            show: false, //y 显示隐藏
            // 去除y轴上的刻度值
            axisLabel: {
                show: false,
            },
            //去掉网格线
            splitLine: {
                show: false
            },
            //去掉刻度线
            axisTick: {
                show: false
            },
            name: "",
            show: true,
            axisLine: {
                lineStyle: {
                    color: '#01AAE2',
                    width: 2, //这里是为了突出显示加上的
                }
            }
        },

        series: [{
            animationDuration: 5000,
            name: '收益值',
            type: 'line',
            smooth: true,
            data: [100, 200, 350, 430, 560, 630, 700],
            areaStyle: { //区域颜色
                normal: {
                    color: 'rgba(2, 49, 83,.4)'
                }

            },
            symbol: "circle", //设定为实心点
            symbolSize: 3, //设定实心点的大小
            itemStyle: {
                normal: {
                    color: 'rgba(2, 49, 83,.8)', //设置小圆点颜色
                    lineStyle: {
                        color: 'rgba(2, 49, 83,.8)', //设定折线颜色
                        width: 3
                    }
                }
            },
            markArea: {
                label: {
                    fontSize: 14,
                    color: "#fff"
                },
                itemStyle: {
                    color: "#9BE2BB",
                },
                data: [
                    [{
                        name: '预计收益',
                        xAxis: '2018'
                    }, {
                        xAxis: '2022'
                    }]
                ]
            }
        }]
    };

    //基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('earnings'));
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    //自适应大小
    window.addEventListener("resize", function () {
        myChart.resize();
    });
}
earnings();


function bar1() {
    var option = {
        grid: {
            left: '3%',
            right: '3%',
            bottom: '20px',
            top: "30px",
            containLabel: true //包含标签
        },
        tooltip: {
            trigger: 'item',
            formatter: "{b} <br/>{c}亿"
        },
        xAxis: {
            data: ["往期", "预期"],
            //刻度
            axisTick: {
                "show": false
            },
            //x轴颜色
            axisLine: {
                lineStyle: {
                    color: "#00A0E9",
                    width: 1,
                }
            },
            //x轴文字颜色
            axisLabel: {
                textStyle: {
                    color: '#fff'
                },
                fontSize: 16
            }

        },
        //隐藏y轴
        yAxis: {
            "show": false
        },
        series: [{
            animationDuration: 5000,
            name: '',
            type: 'bar',
            data: [96, 106],
            //宽度
            barWidth: 46,
            //间距
            barGap: 42,
            itemStyle: {
                normal: {
                    color: function (params) {
                        var colorList = [{
                                colorStops: [{
                                        offset: 0,
                                        color: '#488FF1'
                                    }, //设置柱状图渐变颜色
                                    {
                                        offset: 1,
                                        color: "#488FF1"
                                    }
                                ]
                            },
                            {
                                type: 'linear',
                                x: 0,
                                y: 1,
                                x2: 0,
                                y2: 0,
                                colorStops: [{
                                        offset: 0,
                                        color: '#DFEBFA'
                                    },
                                    {
                                        offset: 1,
                                        color: "#97EB9B"
                                    }
                                ],
                            }
                        ]
                        return colorList[params.dataIndex];
                    }
                },
            },
        }, ]
    }


    //基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('bar1'));
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    //自适应大小
    window.addEventListener("resize", function () {
        myChart.resize();
    });
}
bar1();

function bar2() {
    var option = {
        grid: {
            left: '3%',
            right: '3%',
            bottom: '20px',
            top: "30px",
            containLabel: true //包含标签
        },
        tooltip: {
            trigger: 'item',
            formatter: "{b} <br/>{c}亿"
        },
        xAxis: {
            data: ["往期", "预期"],
            //刻度
            axisTick: {
                "show": false
            },
            //x轴颜色
            axisLine: {
                lineStyle: {
                    color: "#00A0E9",
                    width: 1,
                }
            },
            //x轴文字颜色
            axisLabel: {
                textStyle: {
                    color: '#fff'
                },
                fontSize: 16
            }

        },
        //隐藏y轴
        yAxis: {
            "show": false
        },
        series: [{
            animationDuration: 5000,
            name: '',
            type: 'bar',
            data: [96, 106],
            //宽度
            barWidth: 46,
            //间距
            barGap: 42,
            itemStyle: {
                normal: {
                    color: function (params) {
                        var colorList = [{
                                colorStops: [{
                                        offset: 0,
                                        color: '#488FF1'
                                    }, //设置柱状图渐变颜色
                                    {
                                        offset: 1,
                                        color: "#488FF1"
                                    }
                                ]
                            },
                            {
                                type: 'linear',
                                x: 0,
                                y: 1,
                                x2: 0,
                                y2: 0,
                                colorStops: [{
                                        offset: 0,
                                        color: '#DFEBFA'
                                    },
                                    {
                                        offset: 1,
                                        color: "#97EB9B"
                                    }
                                ],
                            }
                        ]
                        return colorList[params.dataIndex];
                    }
                },
            },
        }, ]
    }


    //基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('bar2'));
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    //自适应大小
    window.addEventListener("resize", function () {
        myChart.resize();
    });
}
bar2();

/** 
 * 增加配套加工产业 addIndustry()
 */

function addIndustry() {
    var option = {
        tooltip: {
            trigger: 'item',
            formatter: "{b} <br/>{c}项"
        },
        series: {
            animationDuration: 5000,
            type: 'pie',
            // 直接提示信息所需信息
            label: {
                normal: {
                    formatter: "{b} {c}个",
                    fontSize: 12,
                    color: "#fff",
                }
            },
            data: [{
                    name: '基础设施建设',
                    value: 1
                },
                {
                    name: '食用加工业',
                    value: 1
                },
                {
                    name: '广告印刷业',
                    value: 1
                },
                {
                    name: '传统制造',
                    value: 1
                },
                {
                    name: '酒店用品业',
                    value: 3
                },
                {
                    name: '数字经济',
                    value: 2
                },
            ]
        },
        color: ['#CEE5F7', '#2F91CF', '#76BCE9', '#8CC6ED', '#A1D1F1', '#71C9DB', '#ca8622'],
    }

    //基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('add-industry'));
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    //自适应大小
    window.addEventListener("resize", function () {
        myChart.resize();
    });
}

addIndustry();


function addJob() {
    var option = {
        color: [{
            colorStops: [{
                    offset: 0,
                    color: '#438CF0'
                }, //设置柱状图渐变颜色
                {
                    offset: 1,
                    color: "#A1FFE3"
                }
            ]
        }],
        itemStyle: {
            barBorderRadius: [0, 20, 20, 0] //设置圆角
        },
        barWidth: 20, //柱图宽度
        grid: { //调整位置大小
            left: '7%',
            right: '4%',
            bottom: '3%',
            top: "20px",
            containLabel: true
        },
        xAxis: {
            type: 'value',
            boundaryGap: [0, 0.01],
            show: false
        },
        // dataZoom: { //数据多设置滚动条
        //     type: "slider",
        //     show: true,
        //     yAxisIndex: [0],
        //     left: 0,
        //     start: 1,
        //     end: 30,
        //     minValueSpan: 'horizontal'
        // },
        yAxis: {
            type: 'category',
            data: [
                '零售业', '餐饮业', '金融业', '房地产'
            ],
            axisLine: {
                show: false,
                lineStyle: {
                    color: '#509DEF',
                    width: 2, //这里是为了突出显示加上的
                }
            },
            //刻度
            axisTick: {
                "show": false
            },
            axisLabel: {
                textStyle: {
                    color: '#fff', //设置y轴字体   
                }
            },
        },
        series: [{
            animationDuration: 5000,
            name: '计划',
            type: 'bar',
            data: [50, 150, 200, 250],
            itemStyle: {
                normal: {
                    label: {
                        show: true,
                        position: 'right',
                        formatter: '{c}位', //数据显示后面
                        color: "#fff"
                    }
                }
            },
        }]
    };
    //基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('add-job'));
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    //自适应大小
    window.addEventListener("resize", function () {
        myChart.resize();
    });
}
addJob();

/**
 * 项目进度时间表
 */
function projectSchedule(p) {
    var option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow',
                label: {
                    backgroundColor: '#6a7985'
                }
            },
            // trigger: 'item',
            formatter: function (params) {
                if (params.length == 2) {
                    console.log(111);
                    return;
                }

                var expect = params[0].data; //预计用时
                var actual = params[1].data; //实际
                var delay = params[2].data; //逾期

                var htmlStr = '<div>';
                //为了保证和原来的效果一样，这里自己实现了一个点的效果
                htmlStr += '<span>节点号:' + params[0].axisValue + '</span></br><span>预计完成时间:' + expect + '天</span></br><span>实际完成时间:' + actual + '天</span></br><span>逾期:' + delay + '天</span>';
                //添加一个汉字，这里你可以格式你的数字或者自定义文本内容
                // htmlStr += params.seriesName + '：'+params.value + '笔';
                htmlStr += '</div>';
                return htmlStr;
            },

        },

        grid: {
            left: '3%',
            right: '4%',
            bottom: '5%',
            containLabel: true
        },
        xAxis: [{
            type: 'category',
            boundaryGap: false,
            //x轴文字
            data: p.nodes,
            axisTick: {
                "show": false
            },
            //x轴颜色
            axisLine: {
                lineStyle: {
                    color: '#00A0E9',
                    width: 2, //这里是坐标轴的宽度
                }
            },
            //x轴字体颜色
            axisLabel: {
                textStyle: {
                    color: '#fff' //颜色
                },
                fontSize: 16,//字体大小
            }
        }],
        yAxis: [{
            type: 'value',
            //y轴颜色
            axisLine: {
                lineStyle: {
                    color: '#00A0E9',
                    width: 2, //这里是坐标轴的宽度
                }
            },
            //去掉网格线
            splitLine: {
                show: false
            },
            //y轴字体颜色
            axisLabel: {
                textStyle: {
                    color: '#fff' //颜色
                },
                fontSize: 16, //字体大小
                formatter: '{value} 天'
            },
        }],
        series: [{
                animationDuration: 3000,
                symbol: "none",
                name: '预计用时',
                color: '#F6B37F',
                type: 'line',
                areaStyle: {},
            // p.planTimes
                data: p.planTimes ,
                smooth: true,
            },
            {
                animationDuration: 3000,
                //圆点none
                symbol: "none",
                name: '实际用时',
                color: '#006CFF',
                type: 'line',
                areaStyle: {},
                data: p.factTimes,
                smooth: true,

            },
            {
                animationDuration: 3000,
                name: '延期',
                type: 'line',
                symbol: 'circle',
                //圆点大小
                symbolSize: '12',
                data: p.timeStates,
                smooth: true,
                itemStyle: {
                    normal: {
                        color: "#FF3155", //小圆点颜色
                        lineStyle: {
                            color: "#56D7AB", //折线颜色
                            width: 0
                        }
                    }
                }
            },
          /*  {
                animationDuration: 2000,
                name: '超前',
                type: 'line',
                color: '##8CBCFD',
                areaStyle: {
                    normal: {}
                },
                data: [

                ],
                smooth: true,
            },*/
        ]
    };


    //基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('project-schedule-chart'));
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    //自适应大小
    window.addEventListener("resize", function () {
        myChart.resize();
    });
}
